<template>
  <div>
    <h1>app</h1>
    <!-- 路由组件内容显示的出口 
    每一次路由组件的切换都是路由组件的销毁与重建
    keep-alive  缓存路由组件

    keep-alive
    1.默认情况下被切换的路由是路由组件的销毁与重建
    2.keep-alive可以缓存路由组件对象，提高用户体验

    注：对数据实时性要求比较高，则不要使用缓存路由组件（keep-alive）,低可以使用，可以提高用户体验

    -->
    <router-view name="HomeTwo"></router-view>
    <keep-alive>
      <router-view :info="info"></router-view>
    </keep-alive>
    <router-view name="HomeOne"></router-view>
    <!-- 如果是注册 登录页面不能出现底部导航栏
    底部导航栏 本质  ul
    有的情况下ul显示 不是登录注册都显示  
    首页 分类 搜索 我的  显示 ---》需要造标识

    有的情况下ul不显示 是登录注册页面时不显示 不用加表示

    造一个东西 能控制它是否显示
    v-if
    v-show

    得的结论 需要找 v-show(v-if) 后面跟的判断条件

     -->
    <ul class="list" v-if="$route.meta.show">
      <li>
        <router-link :to="{ path: '/home' }">首页</router-link>
      </li>
      <li>
        <router-link to="/cate">分类</router-link>
      </li>
      <li>
        <!-- <router-link to="/search">搜索</router-link> -->
        <!-- <router-link :to="{ name: 'search' }">搜索</router-link> -->
        <router-link to="/sousuo">搜索</router-link>
      </li>
      <li>
        <router-link to="/my">我的</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "涵涵呢？",
    };
  },
};
</script>

<style lang="less" scoped>
.list {
  display: flex;
  list-style: none;
  li {
    margin-left: 50px;
    a {
      text-decoration: none;
      font-size: 50px;
    }
    .router-link-active {
      color: pink;
    }
  }
}
</style>